{% extends 'type_base.html' %}

{% load static %}

{% block title %}
    {{ user.username }}的购物车
{% endblock %}

{% block mycss %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/type_show.css' %}"/>
{% endblock %}

{% block mycart %}

{% endblock %}

{% block type_class %}
    {% if msg %}
        <div class="alert alert-warning alert-dismissible fade show" role="alert">
            <strong>{{ msg }}</strong>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    {% endif %}
    <ul class="nav flex-column">
        <li class="nav-item">
            <a class="nav-link justify-content-end" href="{% url 'shop:type_show' %}">全部</a>
        </li>
        {% for type in types %}
            <li class="nav-item">
                {% csrf_token %}
                <!-- <a class="type_class nav-link justify-content-end "
                           href="javascript:;" tag="{{ type.id }}">{{ type.tname }}</a>
                        -->
                <a class="nav-link justify-content-end"
                   href="{% url 'shop:detail_type' type.id %}">{{ type.tname }}</a>

            </li>
        {% endfor %}
    </ul>
{% endblock %}

{% block type_goods %}
    <form action="{% url 'shop:generate_order'%}" method="post">
        {% csrf_token %}
        <table class="table table-hover a" style="width: 90%;" id="type-show">
            <tr>
                <td style="text-align:center;">选择</td>
                <td style="text-align:center; ">名称</td>
                <td style="text-align:center; ">图片</td>
                <td style="text-align:center; ">单价</td>
                <td style="text-align:center; ">数量</td>
                <td style="text-align:center; ">小计</td>
                <td style="text-align:center; ">操作</td>
            </tr>

            {% for cart in carts %}
                <tr>
                    <td class="father_selected" style="width:8%;text-align:center;">
                        <input type="checkbox" name="selected_0" class="selected" value="{{ cart.goods.id }}" style="line-height:100%">
                    </td>
                    <td style="width:16%;text-align:center">
                        <a href="{% url 'shop:goods_details' cart.goods.id %}">{{ cart.goods.name }}</a>
                    </td>
                    <td style="width:20%">
                        <img style="width:100%;height:8em" alt="" src="/static{{ MEDIA_URL }}{{ cart.goods.image }}">
                    </td>
                    <td class="single_price" style="width:16%;text-align:center;">
                        ￥<em>{{ cart.goods.price }}</em>/{{ cart.goods.unite }}</td>
                    <td style="width:16%;text-align:center;">
                        <a href="javascript:;" style="font-size:3ch" class="minus" id="minus">-</a>
                        <input class="goods_num" type="text" style="width:5ch; text-align:center"
                               tag="{{ cart.goods.id }}" value="{{ cart.number }}">
                        <a href="javascript:;" style="font-size:3ch" class="add" id="add">+</a>
                    </td>
                    <td class="single_total" style="width:16%;text-align:center;">￥<em>{{ cart.total }}</em></td>
                    <td style="width:8%;text-align:center;">
                        <!--设置href="javascript:;使其执行无意义语句，阻止执行跳转 -->
                        <a href="javascript:;" tag={{ cart.goods.id }} class="cart_del">删除</a>
                    </td>
                </tr>
            {% empty %}
                <tr>
                    <td>还没有商品</td>
                </tr>
            {% endfor %}

        </table>
        <table class="table table-hover a" style="width: 90%;">
            <tr>
                <td style="width: 100%">
                    <input id="all_selected" type="checkbox">
                    <p>全选</p>
                    <p class="btn btn-warning" style="float:right;border:1px solid #f92672">
                        <p1 id="all_total" >合计(不含运费)：￥<em id="all_total_child" style="color:red" >0.00</em></p1>
                        <br>
                        <p1 id="gnum" class="small">共计<em id="gnum_child" style="color:red">0</em>件商品</p1>
                    </p>
                    <input type="submit" class="btn btn-success" style="float: right;height: 4em" value="去结算">

                </td>
            </tr>
        </table>
    </form>
{% endblock %}

{% block myjs %}
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="{% static 'js/main.js' %}"></script>
    <script>
    //购物车初始检查
$(document).ready(function () {
    var all_total = parseFloat(document.getElementById('all_total_child').innerText);
    var gnum = parseFloat(document.getElementById('gnum_child').innerText)
    var all_gum = document.getElementsByClassName('selected').length
    $('.selected').each(function () {
        if($(this).prop('checked')===true){
            all_total += parseFloat($(this).parent().parent().children('.single_total').children().text())
            gnum += 1
        }

    })
    if (gnum === all_gum) {
            $('#all_selected').prop('checked', true)
        }
    $('#all_total').children().text(all_total.toFixed(2))
    $('#gnum').children().text(gnum)
})

    </script>
{% endblock %}